
    var form = layui.form, table = layui.table, $ = layui.jquery, id = getQueryVariable("id");

    var data0 = [{
        id: "1",
        contracttype: "text1",
        productimg: "statics/images/layui-logo.jpg",
        number: "3",
        batchno: "333",
        warehousename:"1",
        productcode:"1"
    }, {
        id: "2",
        contracttype: "text1",
        productimg: "statics/images/layui-logo.jpg",
        number: "3",
        batchno: "333",
        warehousename:"1",
        productcode:"2"
    }, {id: "3", contracttype: "text1", productimg: "statics/images/layui-logo.jpg", number: "3", batchno: "333",
        warehousename:"1",
        productcode:"3"}];
    var data1 = [{
        id: "1",
        filename: "layui-logo.jpg",
        url: "statics/images/layui-logo.jpg",
        uploaddate: "2020-10-01"
    }, {id: "2", filename: "layui-logo.jpg", url: "statics/images/layui-logo.jpg", uploaddate: "2020-10-01"}, {
        id: "3",
        filename: "layui-logo.jpg",
        url: "statics/images/layui-logo.jpg",
        uploaddate: "2020-10-01"
    }, {id: "4", filename: "layui-logo.jpg", url: "statics/images/layui-logo.jpg", uploaddate: "2020-10-01"}];
var data2 = [{
    id: "1",
    operationtype: "text1",
    theoperator: "text2",
    operationdate: "text3",
    modifythecontent: "text4"
}, {
    id: "2",
    operationtype: "text1",
    theoperator: "text2",
    operationdate: "text3",
    modifythecontent: "text4"
    }, {
        id: "3",
        operationtype: "text1",
        theoperator: "text2",
        operationdate: "text3",
        modifythecontent: "text4"
    }, {id: "4", operationtype: "text1", theoperator: "text2", operationdate: "text3", modifythecontent: "text4"}];
var data3 =[{id:"1","productcode":"text1",specificationcoding:"text2"},{id:"2","productcode":"text2",specificationcoding:"text2"},{id:"3","productcode":"text3",specificationcoding:"text2"},{id:"4","productcode":"text4",specificationcoding:"text2"},{id:"5","productcode":"text5",specificationcoding:"text2"}];

    $('#editor-form').find('input,textarea,select').attr('disabled',true);
    //表单初始值，修改时调用
    if (id != "") {
        form.val("editor-form", {
            "contact": "进入查看明细",
        })
    }
    form.render();
//--产品信息
    table.render({
        elem: '#storageproducts',
        id: 'storageproductstableid',
        data: data0,
        toolbar: '#storageproductstoolbar',
        cols: [[
            {field: 'productimg', title: '图片', width: 120, align: 'center', templet: '#imgTpl'},
            {field: 'purchaseorderno', width: 120, title: '采购单号'},
            {field: 'productcode', width: 120, title: '产品编码'},
            {field: 'specificationcoding', width: 120, title: '规格编码',sort:true},
            {field: 'thespecification', width: 120, title: '规格说明',sort:true},
            {field: 'customersarticlenumber', width: 120, title: '客户货号', sort:true},
            {field: 'chinesename', width: 120, title: '中文名称',sort:true},
            {field: 'englishnames', width: 120, title: '英文名称',sort:true},
            {field: 'chinesedescription', width: 120, title: '中文描述',sort:true},
            {field: 'englishdescription', width: 120, title: '英文描述',sort:true},
            {field: 'number', width: 80, title: '数量',sort:true},
            {field: 'unit', width: 120, title: '单位', templet: '#unitselect'},
            {field: 'unitprice', width: 80, title: '单价',sort:true},
            {field: 'amountsubtotal', width: 120, title: '金额小计',sort:true},
            {field: 'color', width: 120, title: '颜色',sort:true},
            {field: 'grossweight', width: 120, title: '毛重'},
            {field: 'weightsubtotal', width: 120, title: '毛重小计', sort:true},
            {field: 'netweight', width: 120, title: '净重', sort:true},
            {field: 'netweighttsubtotal', width: 120, title: '净重小计', sort:true},
            {field: 'volume', width: 120, title: '体积', sort:true},
            {field: 'joenumber', width: 120, title: '托数',sort:true},
            {field: 'quantityeachhold', width: 120, title: '每托量',sort:true},
            {field: 'number', width: 120, title: '件数',sort:true},
            {field: 'eachnumber', width: 120, title: '每件数量',sort:true},
            {field: 'paymentpaymentdays', width: 120, title: '付款账期',sort:true},
            {field: 'costunitprice', width: 120, title: '成本单价',sort:true},
            {field: 'costsubtotal', width: 120, title: '成本小计',sort:true},
            {field: 'finishedproductcost', width: 120, title: '成品成本',sort:true},
            {field: 'sparepartscost', width: 120, title: '配件成本',sort:true},
            {field: 'supplier', width: 120, title: '供应商',sort:true},
            {field: 'customercontractno', width: 120, title: '客户合同号',sort:true},
            {field: 'exportcontractno', width: 120, title: '外销合同号',sort:true},
            {field:'long', title:'外包装长', width: 120, sort:true},
            {field:'wide', title:'外包装宽', width: 120, sort:true},
            {field:'high', title:'外包装高', width: 120, sort:true},
            {field:'outerpackingsize', title:'外包装尺寸', width: 120, sort:true},
            {field:'outerpackingunit', title:'外包装单位', width: 120, sort:true},
        ]],
        page: true,
        height: 380
        , done: function (res, curr, count) {
            hoverOpenImg();//显示大图
        }
    });
    //监听行单击事件
    table.on('row(storageproductstable)', function(obj){
        $("#hidden").show();
        table.render({
            elem: '#productsaselect'
            ,data:data2
            ,toolbar: '#productsatoolbar'
            ,where:{id:obj.data.id} //查询的产品ID，条件
            ,cols: [[
                ,{field: 'productcode', title: '产品编码', sort:true}
                ,{field: 'specificationcoding', title: '规格编码', sort:true}
                ,{field:'finishedproductratio', title:'成品比例', sort:true}
                ,{field:'accessoriesproportion', title:'配件比例', sort:true}
                ,{field:'number', title:'配件数量', sort:true}
                ,{field: 'costprice', width: 120, title: '成本单价', sort:true}
                ,{field: 'costsubtotal', width: 120, title: '成本小计', sort:true}
                ,{field: 'purchaseorderno', width: 120, title: '采购单号', sort:true}
                ,{field: 'purchaseorderno', width: 120, title: '采购单号'}
                ,{field: 'supplier', width: 120, title: '供应商', sort:true}
                ,{field:'chinesename', title:'中文名称', sort:true}
                ,{field:'englishnames', title:'英文名称', sort:true}
                ,{field:'expressaddress', title:'毛重', sort:true}
                ,{field:'netweight', title:'净重', sort:true}
                ,{field:'volume', title:'体积', sort:true}
            ]]
            ,id: 'productsatableid'
            ,page: true
            ,height:300
        });
    });

    function hoverOpenImg() {
        var img_show = null; // tips提示
        $("body").delegate("td img", "mouseover", function () {
            var img = "<img class='img_msg' src='" + $(this).attr('src') + "' style='width:130px;' />";
            img_show = layer.tips(img, this, {
                tips: [2, 'rgba(41,41,41,.5)']
                , area: ['160px']
            });
        });
        $("body").delegate("td img", "mouseout", function () {
            layer.close(img_show);
        });
    }

//---费用
    table.render({
        elem: '#cost'
        , data: data1
        , toolbar: '#costtoolbar'
        , cols: [[
            {field: 'costtype', title: '费用类型'}
            , {field: 'amount', title: '金额',event:'amount',sort:true}
            , {field: 'descr', title: '备注说明',sort:true}
        ]]
        , id: 'costtableid'
        , height: 380
        , page: true
    });
//---附件
    table.render({
        elem: '#attachment'
        , data: data1
        , toolbar: '#attachmenttoolbar'
        , cols: [[
            {field: 'filename', title: '文件名', fixed: true}
            , {field: 'uploaddate', title: '上传日期', fixed: true}
            , {fixed: 'right', width: 180, align: 'center', toolbar: '#attachmenteditor', title: '操作'}
        ]]
        , id: 'attachmenttableid'
        , height: 380
        , page: true
    });
    table.on('tool(attachmenttable)', function (obj) {
        var data = obj.data;
        if (obj.event === 'download') { //下载
            var a = document.createElement('a');
            var event = new MouseEvent('click');
            a.download = data.filename;
            a.href = data.url;
            a.dispatchEvent(event)
        }
    });

//---操作日志
    table.render({
        elem: '#otherwarehouselog'
        , data: data2
        , cols: [[
            {field: 'operationtype', title: '操作类型', fixed: true}
            , {field: 'theoperator', title: '操作员'}
            , {field: 'operationdate', title: '操作日期'}
            , {field: 'modifythecontent', title: '修改内容'}
        ]]
        , id: 'logtableid'
        , height: 380
        , limit: 30//显示的数量
        , page: true
    });